<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>排版数据读取工具</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        line-height: 1.5;
        color: #333;
        background-color: #f5f7fa;
        padding: 20px;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        padding: 20px 25px;
      }

      .header {
        text-align: center;
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
      }

      h1 {
        margin-bottom: 10px;
        color: #303133;
        font-weight: 500;
      }

      .form-group {
        margin-bottom: 15px;
      }

      /* 搜索条件横向布局 */
      .search-conditions {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
        background-color: #f9fafc;
        padding: 18px;
        border-radius: 6px;
        margin-bottom: 20px;
        border: 1px solid #eaeaea;
      }

      @media (max-width: 992px) {
        .search-conditions {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (max-width: 576px) {
        .search-conditions {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      
      @media (max-width: 480px) {
        .search-conditions {
          grid-template-columns: 1fr;
        }
      }

      .action-buttons {
        margin-top: 20px;
        margin-bottom: 25px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }

      input,
      select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.3s;
      }

      input:focus,
      select:focus {
        border-color: #91caff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
        outline: none;
      }

      /* 日期输入框样式 */
      input[type="date"] {
        flex: 1; /* 使日期输入框均匀分布空间 */
        cursor: pointer;
        /* 使浏览器自带的日期选择器在点击时出现 */
        position: relative;
        padding-right: 30px; /* 为日历图标留出空间 */
        height: 34px; /* 设置固定高度与其他输入框一致 */
      }

      /* 确保日期选择器在移动设备上也能正常显示 */
      input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }

      button {
        background-color: #409eff;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        margin-right: 10px;
        transition: all 0.3s;
      }

      button:hover {
        background-color: #66b1ff;
        box-shadow: 0 2px 5px rgba(64, 158, 255, 0.2);
      }

      button:disabled {
        background-color: #e0e0e0;
        color: #999;
        cursor: not-allowed;
        box-shadow: none;
      }

      .config-button {
        background-color: #ecf5ff;
        color: #409eff;
        border: 1px solid #d9ecff;
      }

      .config-button:hover {
        background-color: #d9ecff;
        border-color: #b3d8ff;
        color: #409eff;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        table-layout: fixed; /* 固定表格布局，确保列宽按设置执行 */
        border: 1px solid #ebeef5;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        border-radius: 6px;
      }

      th,
      td {
        padding: 10px 12px;
        text-align: center;
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
      }

      th {
        background-color: #f5f7fa;
        font-weight: 500;
        color: #606266;
        position: sticky;
        top: 0;
        z-index: 10; /* 提高表头z-index，确保在内容之上 */
        border-bottom: 1px solid #ebeef5;
        padding: 12px 15px;
        white-space: nowrap;
        overflow: visible;
      }

      tr:hover {
        background-color: #f5f7fa;
      }

      tr:nth-child(even) {
        background-color: #fafafa;
      }

      tr.selected {
        background-color: #ecf5ff;
        border-left: 3px solid #409eff;
      }

      .hidden {
        display: none;
      }

      .error-message {
        color: #f56c6c;
        font-size: 12px;
        margin-top: 5px;
      }

      .input-error {
        border-color: #f56c6c !important;
      }

      /* 弹窗样式 */
      .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
      }

      .modal {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        width: 500px;
        max-width: 90%;
        max-height: 90vh;
        overflow-y: auto;
      }

      .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .modal-header h3 {
        margin: 0;
        border-left-style: none;
      }

      .modal-body {
        padding: 20px;
      }

      .modal-footer {
        padding: 15px 20px;
        border-top: 1px solid #eee;
        text-align: right;
      }

      .close-button {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #999;
        margin: 0;
        padding: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
      }

      .close-button:hover {
        background-color: #f0f0f0;
        color: #333;
      }

      .close-button:active {
        background-color: #e0e0e0;
        transform: scale(0.95);
      }

      /* 确认对话框样式 */
      .confirm-dialog {
        text-align: center;
      }

      .confirm-dialog p {
        margin-bottom: 20px;
      }

      .config-buttons {
        position: absolute;
        right: 20px;
        top: 20px;
      }

      /* 响应式配置按钮 */
      @media (max-width: 768px) {
        .config-buttons {
          position: static;
          display: flex;
          justify-content: center;
          margin-top: 15px;
          gap: 10px;
        }

        .header {
          text-align: center;
          padding-bottom: 10px;
        }
      }

      @media (max-width: 480px) {
        .config-buttons {
          flex-direction: column;
          align-items: center;
        }

        .config-button {
          width: 100%;
          max-width: 200px;
        }
      }

      /* 响应式表格高度 */
      @media (max-width: 1024px) {
        .table-container, .print-info-table {
          max-height: 35vh;
        }
        
        .table-container.fixed-height-lg, 
        .print-info-table.fixed-height-lg {
          max-height: 45vh;
        }
      }
      
      @media (max-width: 768px) {
        .table-container, .print-info-table {
          max-height: 40vh;
        }
        
        .table-container.fixed-height-lg, 
        .print-info-table.fixed-height-lg {
          max-height: 50vh;
        }
      }
      
      @media (max-height: 800px) {
        .table-container, .print-info-table {
          max-height: 25vh;
        }
        
        .table-container.fixed-height-lg, 
        .print-info-table.fixed-height-lg {
          max-height: 35vh;
        }
      }

      /* 加载动画样式 */
      .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2000;
      }

      .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      /* 编辑单元格样式优化 */
      .editable-cell {
        cursor: pointer;
        position: relative;
        padding: 5px 8px;
        border: 1px dashed transparent;
        border-radius: 4px;
        transition: all 0.3s;
      }

      .editable-cell:hover {
        background-color: #f5f8ff;
        border-color: #91caff;
      }

      .editable-cell.empty {
        color: #bbb;
        font-style: italic;
      }

      .cell-edit-input {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid #91caff;
        border-radius: 4px;
        outline: none;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
      }

      /* 居中对齐样式 */
      .text-center {
        text-align: center;
      }

      .text-right {
        text-align: right;
      }

      /* 空表格样式 - 移除不需要的样式 */
      .empty-table-message {
        text-align: center;
        padding: 20px;
        color: #999;
        font-style: italic;
      }

      .add-row-button {
        background-color: #1890ff;
        margin-bottom: 15px;
      }

      .add-row-button:hover {
        background-color: #40a9ff;
      }

      /* 已编辑行标记 */
      .row-edited {
        background-color: #fdf6ec !important; /* 更淡的黄色背景 */
      }

      .row-edited:hover {
        background-color: #faecd8 !important;
      }

      /* 支持表格横向滚动 */
      .table-container, .print-info-table {
        width: 100%;
        overflow-x: auto; /* 关键：允许横向滚动 */
        margin-bottom: 20px;
        border-radius: 6px;
        border: 1px solid #ebeef5;
        box-shadow: 0 1px 4px rgba(0,0,0,0.03);
        background-color: #fff;
        max-height: 30vh; /* 改为视窗高度单位 */
        overflow-y: auto; /* 允许纵向滚动 */
      }

      /* 允许设置不同的表格高度 */
      .table-container.fixed-height-sm, 
      .print-info-table.fixed-height-sm {
        max-height: 20vh;
      }

      .table-container.fixed-height-md, 
      .print-info-table.fixed-height-md {
        max-height: 30vh;
      }

      .table-container.fixed-height-lg, 
      .print-info-table.fixed-height-lg {
        max-height: 40vh;
      }

      .table-container.fixed-height-xl, 
      .print-info-table.fixed-height-xl {
        max-height: 50vh;
      }

      /* 使表格足够宽以触发滚动条 */
      .table-container table, .print-info-table table {
        min-width: 100%;
        width: max-content; /* 确保表格足够宽，能触发滚动 */
      }

      /* 编辑图标 */
      .edit-icon {
        font-size: 12px;
        color: #91caff;
        margin-left: 5px;
        visibility: hidden;
      }

      .editable-cell:hover .edit-icon {
        visibility: visible;
      }

      /* 移除不需要的样式 */
      .table-container table th:first-child,
      .table-container table td:first-child {
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      /* 单元格溢出处理样式 */
      .cell-overflow {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      /* 表头溢出处理优化 */
      th.cell-overflow {
        overflow: visible; /* 让表头文字可见，不被截断 */
        text-overflow: clip; /* 不使用省略号 */
        white-space: nowrap; /* 保持单行 */
      }
      
      /* 固定列表头特别处理 */
      th.sticky-left, th.sticky-right {
        overflow: visible !important; /* 确保固定列的表头文字可见 */
      }

      /* 固定列样式 - 修复版 */
      .table-container th.sticky-left,
      .table-container td.sticky-left,
      .print-info-table th.sticky-left,
      .print-info-table td.sticky-left {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        border-right: 1px solid #ebeef5; /* 确保右侧有边框 */
        z-index: 2; /* 固定列z-index */
      }

      .table-container th.sticky-right,
      .table-container td.sticky-right,
      .print-info-table th.sticky-right,
      .print-info-table td.sticky-right {
        position: -webkit-sticky;
        position: sticky;
        right: 0;
        border-left: 1px solid #ebeef5; /* 确保左侧有边框 */
        z-index: 2; /* 固定列z-index */
      }

      /* z-index层级调整 */
      /* 1. 普通表头 */
      th {
        background-color: #f5f7fa;
        font-weight: 500;
        color: #606266;
        position: sticky;
        top: 0;
        z-index: 10; /* 提高表头z-index，确保在内容之上 */
        border-bottom: 1px solid #ebeef5;
        padding: 12px 15px;
        white-space: nowrap;
        overflow: visible;
      }

      /* 2. 固定列单元格 */
      .table-container td.sticky-left,
      .table-container td.sticky-right,
      .print-info-table td.sticky-left,
      .print-info-table td.sticky-right {
        z-index: 2; /* 固定列单元格z-index */
      }

      /* 3. 固定列表头 - 最高优先级 */
      .table-container th.sticky-left,
      .table-container th.sticky-right,
      .print-info-table th.sticky-left,
      .print-info-table th.sticky-right {
        z-index: 11; /* 固定列表头拥有最高层级，比普通表头高 */
      }

      /* 固定列的背景色 */
      th.sticky-left, th.sticky-right {
        background-color: #f5f7fa;
      }
      
      /* 单元格背景色 */
      td.sticky-left, td.sticky-right {
        background-color: white; /* 默认背景色 */
      }

      tr:nth-child(even) td.sticky-left,
      tr:nth-child(even) td.sticky-right {
        background-color: #fafafa;
      }
       
      /* 悬停状态下的固定列 */
      tr:hover td.sticky-left,
      tr:hover td.sticky-right {
        background-color: #f5f7fa;
      }
       
      /* 编辑状态下的固定列 */
      tr.row-edited td.sticky-left,
      tr.row-edited td.sticky-right {
        background-color: #fdf6ec;
      }
       
      tr.row-edited:hover td.sticky-left,
      tr.row-edited:hover td.sticky-right {
        background-color: #faecd8;
      }

      /* 修复左右固定单元格的边框和阴影样式 */
      td.sticky-left, th.sticky-left {
        border-right: 1px solid #ebeef5 !important;
        box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);
      }
       
      td.sticky-right, th.sticky-right {
        border-left: 1px solid #ebeef5 !important;
        box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);
      }
      
      /* 加强边框可见性 */
      .table-container table, .print-info-table table {
        border-collapse: separate;
        border-spacing: 0;
      }

      /* 为打印信息表格应用相同样式 */
      .print-info-table {
        margin-top: 15px;
      }
      
      .print-info-table th {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 500;
      }
      
      .print-info-table tr:hover {
        background-color: #f5f7fa;
      }

      h3 {
        margin-top: 25px;
        margin-bottom: 15px;
        font-weight: 500;
        color: #333;
        font-size: 18px;
        padding-left: 8px;
        border-left: 4px solid #409eff;
        border-left-width: 4px; /* 调小其他标题主题色块高度 */
      }

      /* 去除checkbox的focus/active样式 */
      input[type="checkbox"] {
        outline: none;
        box-shadow: none;
      }
      
      input[type="checkbox"]:focus,
      input[type="checkbox"]:active {
        outline: none;
        box-shadow: none;
        border-color: inherit;
      }

      /* 针对表头文字显示的进一步优化 */
      thead th {
        height: auto; /* 允许表头高度自适应 */
        line-height: 1.2; /* 适当降低行高 */
        position: relative; /* 设置相对定位 */
        vertical-align: middle; /* 垂直居中对齐 */
      }
      
      /* 修复固定列表头的显示问题 */
      th.sticky-right {
        text-align: center !important; /* 确保文本居中 */
        min-width: 180px; /* 确保最小宽度足够显示文本 */
      }
      
      /* 确保表头显示完整 */
      .table-container table th:last-child,
      .print-info-table table th:last-child {
        padding-right: 20px; /* 右侧固定列增加右侧内边距 */
      }

      /* 表头固定在顶部 - 调整优先级 */
      .table-container thead th,
      .print-info-table thead th {
        position: sticky;
        top: 0;
        background-color: #f5f7fa; /* 确保背景色不透明 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 添加阴影增强视觉分隔 */
      }

      .table-container thead tr,
      .print-info-table thead tr {
        background-color: transparent; /* 确保不影响th元素 */
      }

      /* 修复滚动时表头重叠问题 */
      .table-container,
      .print-info-table {
        overflow: auto;
        position: relative; /* 创建新的堆叠上下文 */
        isolation: isolate; /* 创建新的堆叠上下文，现代浏览器支持 */
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 加载动画 -->
      <div class="loading-overlay" v-if="loading">
        <div class="spinner"></div>
      </div>

      <div class="container">
        <div class="header">
          <h1>排版数据读取工具</h1>
          <div class="config-buttons">
            <button
              class="config-button"
              @click="showDbConfigModal"
              :disabled="loading"
            >
              数据库配置
            </button>
            <button
              class="config-button"
              @click="showShareConfigModal"
              :disabled="loading"
            >
              Windows共享文件夹配置
            </button>
          </div>
        </div>

        <!-- 排版信息查询 -->
        <div>
          <!-- <h2>搜索条件</h2> -->
          <div class="search-conditions">
            <div class="form-group">
              <label for="partNumber">零件编号</label>
              <input
                type="text"
                id="partNumber"
                v-model="queryParams.partNo"
                placeholder="请输入零件编号"
                :disabled="loading"
              />
            </div>
            <div class="form-group">
              <label for="machineName">基准机床名称</label>
              <input
                type="text"
                id="machineName"
                v-model="queryParams.machineName"
                placeholder="请输入基准机床名称"
                :disabled="loading"
              />
            </div>
            <div class="form-group">
              <label for="materialCode">材料代码</label>
              <input
                type="text"
                id="materialCode"
                v-model="queryParams.materialCode"
                placeholder="请输入材料代码"
                :disabled="loading"
              />
            </div>
            <div class="form-group">
              <label for="updateDateStart">开始日期</label>
              <input
                type="date"
                id="updateDateStart"
                v-model="queryParams.startUpdateTime"
                placeholder="开始日期"
                :disabled="loading"
              />
            </div>
            <div class="form-group">
              <label for="updateDateEnd">结束日期</label>
              <input
                type="date"
                id="updateDateEnd"
                v-model="queryParams.endUpdateTime"
                placeholder="结束日期"
                :disabled="loading"
              />
            </div>
          </div>
          <div class="action-buttons">
            <button @click="resetQuery" :disabled="loading">重置</button>
            <button @click="queryBasicInfo" :disabled="loading">
              查询基本信息
            </button>
            <button
              @click="saveBasicInfo"
              :disabled="editedItems.length === 0 || loading"
            >
              保存基本信息
            </button>
            <!-- 注释掉读取打印信息按钮，改为自动显示
            <button
              @click="readPrintInfo"
              :disabled="selectedItems.length === 0 || loading"
            >
              读取打印信息
            </button>
            -->
            <button
              @click="exportExcel"
              :disabled="printInfoData.length === 0 || loading"
            >
              导出Excel文件
            </button>
          </div>

          <div v-if="basicInfoData.length > 0" style="margin-top: 20px">
            <h3>排版基本信息</h3>
            <div :class="['table-container', printInfoData.length > 0 ? 'fixed-height-md' : 'fixed-height-lg']" style="min-width: 100%; max-width: 100%;">
              <table>
                <colgroup>
                  <col v-for="col in tableConfig" :key="col.field" :style="{ width: col.width ? col.width + 'px' : 'auto' }">
                </colgroup>
                <thead>
                  <tr>
                    <th v-for="col in tableConfig" :key="col.field" 
                        :style="{ textAlign: col.textAlign || 'left' }"
                        :class="{ 
                          'cell-overflow': col.overflow,
                          'sticky-left': col.fixed === 'left',
                          'sticky-right': col.fixed === 'right'
                        }">
                      {{ col.label }}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(item, index) in basicInfoData"
                    :key="index"
                    :class="{ 
                      'selected': selectedItems.includes(item),
                      'row-edited': isRowEdited(item.serialNumber)
                    }"
                  >
                    <!-- 处理不同类型的列 -->
                    <td v-for="col in tableConfig" :key="col.field" 
                        :style="{ textAlign: col.textAlign || 'left' }"
                        :class="{ 
                          'cell-overflow': col.overflow,
                          'sticky-left': col.fixed === 'left',
                          'sticky-right': col.fixed === 'right'
                        }">
                      <!-- 复选框列 -->
                      <template v-if="col.type === 'checkbox'">
                        <input
                          type="checkbox"
                          :checked="item.selected"
                          @click="handleCheckboxClick($event, item)"
                          :disabled="loading"
                        />
                      </template>
                      
                      <!-- 文本列 - 可编辑 -->
                      <template v-else-if="col.editable">
                        <div 
                          class="editable-cell" 
                          :class="{ 'empty': !item[col.field] }"
                          @click="editCell(item, col.field, $event)"
                        >
                          <template v-if="editingCell.item === item && editingCell.field === col.field">
                            <input 
                              class="cell-edit-input"
                              :type="col.type === 'number' ? 'number' : 'text'"
                              v-model="editingCell.value"
                              @blur="saveEdit"
                              @keyup.enter="saveEdit"
                              @keyup.esc="cancelEdit"
                              v-focus
                            />
                          </template>
                          <template v-else>
                            {{ item[col.field] || '点击编辑' }}
                            <span class="edit-icon">✎</span>
                          </template>
                        </div>
                      </template>
                      
                      <!-- 非编辑列 -->
                      <template v-else>
                        {{ item[col.field] || '-' }}
                      </template>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- 编辑信息统计 -->
            <div v-if="getEditedRowsCount() > 0" style="margin-bottom: 15px; color: #fa8c16;">
              <small>已编辑 {{ getEditedRowsCount() }} 行数据，请记得保存</small>
            </div>
          </div>

          <div v-if="printInfoData.length > 0">
            <h3>排版打印信息</h3>
            <div :class="['print-info-table', basicInfoData.length > 0 ? 'fixed-height-md' : 'fixed-height-lg']" style="min-width: 100%; max-width: 100%;">
              <table>
                <colgroup>
                  <col style="width: 200px"> <!-- 零件编号 -->
                  <col style="width: 200px"> <!-- 排版零件号 -->
                  <col style="width: 100px"> <!-- 个数 -->
                  <col style="width: 300px"> <!-- IJP打印信息 -->
                </colgroup>
                <thead>
                  <tr>
                    <th style="text-align: center" class="sticky-left">零件编号</th>
                    <th style="text-align: center">排版零件号</th>
                    <th style="text-align: center">个数</th>
                    <th style="text-align: center" class="sticky-right">IJP打印信息</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in printInfoData" :key="index">
                    <td style="text-align: center" class="cell-overflow sticky-left">{{ item.cf3 }}</td>
                    <td style="text-align: center" class="cell-overflow">{{ item.cf5 }}</td>
                    <td style="text-align: center">{{ item.cf6 }}</td>
                    <td style="text-align: center" class="cell-overflow sticky-right">{{ item.cf7 }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据库配置弹窗 -->
      <div
        class="modal-backdrop"
        v-if="showModal && modalType === 'dbConfig'"
        @click.self="closeModal"
      >
        <div class="modal">
          <div class="modal-header">
            <h3>数据库配置</h3>
            <button
              class="close-button"
              @click="closeModal"
              :disabled="loading"
            >
              &times;
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for="dbIp">IP地址</label>
              <input
                type="text"
                id="dbIp"
                v-model="tempDbConfig.ip"
                placeholder="请输入数据库IP地址"
                :class="{ 'input-error': errors.ip }"
                @blur="validateIpField"
                :disabled="loading"
              />
              <div class="error-message" v-if="errors.ip">
                {{ errors.ip }}
              </div>
            </div>
            <div class="form-group">
              <label for="dbPort">端口号</label>
              <input
                type="number"
                id="dbPort"
                v-model="tempDbConfig.port"
                placeholder="请输入数据库端口"
                :class="{ 'input-error': errors.port }"
                @blur="validatePortField"
                :disabled="loading"
              />
              <div class="error-message" v-if="errors.port">
                {{ errors.port }}
              </div>
            </div>
            <div class="form-group">
              <label for="dbName">数据库名称</label>
              <input
                type="text"
                id="dbName"
                v-model="tempDbConfig.database"
                placeholder="请输入数据库名称"
                :class="{ 'input-error': errors.database }"
                @blur="validateDatabaseField"
                :disabled="loading"
              />
              <div class="error-message" v-if="errors.database">
                {{ errors.database }}
              </div>
            </div>
            <div class="form-group">
              <label for="dbUser">用户名</label>
              <input
                type="text"
                id="dbUser"
                v-model="tempDbConfig.username"
                placeholder="请输入用户名"
                :class="{ 'input-error': errors.username }"
                @blur="validateUsernameField"
                :disabled="loading"
              />
              <div class="error-message" v-if="errors.username">
                {{ errors.username }}
              </div>
            </div>
            <div class="form-group">
              <label for="dbPassword">密码</label>
              <input
                type="password"
                id="dbPassword"
                v-model="tempDbConfig.password"
                placeholder="请输入密码"
                :class="{ 'input-error': errors.password }"
                @blur="validatePasswordField"
                :disabled="loading"
              />
              <div class="error-message" v-if="errors.password">
                {{ errors.password }}
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button @click="testDatabaseConnection" :disabled="loading">
              测试连接
            </button>
            <button @click="saveDatabaseConfig" :disabled="loading || !tempDbConfig._testStatus">
              保存配置
            </button>
          </div>
        </div>
      </div>

      <!-- Windows共享文件夹配置弹窗 -->
      <div
        class="modal-backdrop"
        v-if="showModal && modalType === 'shareConfig'"
        @click.self="closeModal"
      >
        <div class="modal">
          <div class="modal-header">
            <h3>Windows共享文件夹配置</h3>
            <button
              class="close-button"
              @click="closeModal"
              :disabled="loading"
            >
              &times;
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for="shareIp">共享IP地址</label>
              <input
                type="text"
                id="shareIp"
                v-model="tempShareConfig.ip"
                placeholder="请输入共享IP地址"
                :class="{ 'input-error': errors.shareIp }"
                @blur="validateShareIpField"
                :disabled="loading"
              />
              <div class="error-message" v-if="errors.shareIp">
                {{ errors.shareIp }}
              </div>
            </div>
            <div class="form-group">
              <label for="shareUsername">用户名</label>
              <input
                type="text"
                id="shareUsername"
                v-model="tempShareConfig.username"
                placeholder="请输入共享目录用户名"
                :class="{ 'input-error': errors.shareUsername }"
                @blur="validateShareUsernameField"
                :disabled="loading"
              />
              <div class="error-message" v-if="errors.shareUsername">
                {{ errors.shareUsername }}
              </div>
            </div>
            <div class="form-group">
              <label for="sharePassword">密码</label>
              <input
                type="password"
                id="sharePassword"
                v-model="tempShareConfig.password"
                placeholder="请输入共享目录密码"
                :class="{ 'input-error': errors.sharePassword }"
                @blur="validateSharePasswordField"
                :disabled="loading"
              />
              <div class="error-message" v-if="errors.sharePassword">
                {{ errors.sharePassword }}
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button @click="testSharePath" :disabled="loading">
              测试打开共享
            </button>
            <button @click="saveShareConfig" :disabled="loading || !tempShareConfig._testStatus">
              保存配置
            </button>
          </div>
        </div>
      </div>

      <!-- 确认对话框 -->
      <div
        class="modal-backdrop"
        v-if="showModal && modalType === 'confirm'"
        @click.self="closeModal"
      >
        <div class="modal">
          <div class="modal-header">
            <h3>配置提示</h3>
            <button
              class="close-button"
              @click="closeModal"
              :disabled="loading"
            >
              &times;
            </button>
          </div>
          <div class="modal-body confirm-dialog">
            <p>{{ confirmMessage }}</p>
          </div>
          <div class="modal-footer">
            <button @click="confirmAction" :disabled="loading">确认</button>
            <button @click="closeModal" :disabled="loading">取消</button>
          </div>
        </div>
      </div>
    </div>

    <script src="./vue.min.js"></script>
    <script src="./axios.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
